<template>
  <div class="songs-list-main">
    <ul class="nav">
      <li class="title">
        <h3>播放列表（{{list.length}}）</h3>
        <div>
          <el-button><i-bi-clipboard-plus/>收藏全部</el-button>
          <el-button @click="removeAll"><i-bi-trash/>删除全部</el-button>
        </div>
      </li>
      <el-scrollbar max-height="70vh">
        <li v-for="(item,index) in list" :class="{'licard': true, 'active': playSongId === item.id}">
          <div class="image" :style="`background: url(${item.albumPic}) center / cover;`">
            <el-icon @click="currentSong(item)">
              <i-bi-pause-fill v-if="playSongId===item.id"/>
              <i-bi-play-fill class="playicon" v-else/>
            </el-icon>
          </div>
          <div class="songName">
            <div><span>{{item.name}}</span></div>
            <div>
             <span v-for="(singer, index) in item.singer" :key="singer.id" @click.stop="toTabs(singer.id)">
            {{ index < item.singer.length - 1?singer.name + "/" : singer.name }}
          </span>
            </div>
          </div>
          <div class="hove-icon">
            <i-bi-heart/>
            <i-bi-clipboard-plus/>
            <i-bi-trash @click.stop="delList(index)"/>
          </div>
          <div class="right-time">{{util.formatSongTime(item.duration)}}</div>
        </li>
      </el-scrollbar>
    </ul>
  </div>
</template>

<script setup>
import { computed, defineEmits, nextTick, onMounted, reactive, watch } from "vue";
import { usePlayStore } from "@/store/PlayStore";
import util from '@/tools/util.ts'
import {useRouter} from "vue-router";

const emit = defineEmits();
const router = useRouter()
const props = defineProps({
  songList: {
    type: Array,
    required: true
  },
  typeSize: {
    type: String,
    default: "normal"
  },
  stripe: {
    type: Boolean,
    default: false
  },
  height: {
    type: [Number, String],
    default: "auto"
  },
  isScroll: {
    type: Boolean,
    default: false
  },
  offset: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 20
  }
});

const store = usePlayStore();
const info = reactive({
  typeSize: props.typeSize,
  height: props.height,
  curScroll: -1 || 1,
  pageSize: props.pageSize,
  currentPage: 1,
  playing: false,
  timer: null
});
//跳转到歌手信息
function toTabs(id){
  router.push({path:"/singer",query: { id: id } })
}

const playSongId = computed(()=>{
  if (store.isPlayed){
    return store.playList[store.playIndex].id
  }
  return 0
})

// 获取播放列表
const playList = computed(() => store.playList);
const isPlayed = computed(() => store.isPlayed);

onMounted(() => {
  scrollCurSong(curSongInfo);
});

// 获取歌曲列表
const list = computed(() => {
  if (!props.isScroll) {
    // 分页加载数据
    return props.songList.slice(
      (info.currentPage - 1) * info.pageSize,
      info.currentPage * info.pageSize
    );
  } else {
    return props.songList;
  }
});

// 播放当前播放歌曲
const currentSong = (item) => {
  // 若当前唔歌曲 或者 当前播放歌曲不是本歌单显示的歌曲  立即播放当前歌单
  if (!curSongInfo.value || item.id !== curSongInfo.value.id) {
    store.selectPlay([item]);
  } else {
    store.isPlayed = !isPlayed.value;
  }
};

// 获取当前播放音乐信息
const curSongInfo = computed(() => {
  return playList.value[store.playIndex];
});

// 在播放列表删除当前歌曲
const delList = (index) => {
  store.deSong(index)
  if (playList.length === 0){
    emit('tiggerPlayWin',false)
  }
};

// 滚动到当前播放音乐的位置
const scrollCurSong = (cur) => {
  if (props.isScroll) {
    const curIndex = props.songList.findIndex((item) => {
      return item.id === cur.id;
    });

    if (curIndex > 7 && curIndex < props.songList.length - 8) {
      info.curScroll = -(curIndex - 4) * 50;
    } else if (curIndex >= props.songList.length - 8 && props.songList.length - 8 > 0) {
      info.curScroll = -(props.songList.length - 8) * 50;
    } else {
      info.curScroll = 0;
    }
  }
};
function removeAll(){
  store.playList.splice(0,store.playList.length)
  store.isPlayed = false
  store.playIndex = 0
  emit('tiggerPlayWin',false)
}
watch(
  curSongInfo,
  (val) => {
    // 添加歌曲的时候，props的歌曲列表没有更新
    nextTick(() => {
      val && scrollCurSong(val);
    });
  },
  { deep: true }
);

watch(
  () => {
    return props.songList;
  },
  () => {
    info.currentPage = 1;
  }
);
</script>
<style scoped lang="scss">
.songs-list-main{
  margin: 0;
  padding: 0;
  .nav {
    margin-block-start: 0;
    margin: 0;
    overflow-y: hidden;
    .title{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .licard {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 5px 10px 5px 10px;
      cursor: pointer;
      border-radius: 10px;
      .image {
        display: grid;
        place-items: center;
        width: 55px;
        height: 55px;
        border-radius: 10px;
        font-size: 30px;
        margin-right: 10px;
        .playicon {
          display: none;
        }
      }
      &:hover{
        background-color: var(--transparent-1);
        .image .playicon {
          display: block;
        }
        .hove-icon{
          visibility: inherit;
        }
      }
      .songName {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-basis: 300px;
        div:first-child{
          font-size: 19px;
          color: var(--el-text-color-primary);
        }
      }
      .hove-icon {
        visibility: hidden;
        display: flex;
        flex-direction: row;
        flex-basis: 100px;
        font-size: 16px;
        gap: 10px;
        svg:hover{
          color: var(--el-color-error-dark-2);
        }
      }
      .right-time{
        flex-basis: 50px;
      }
    }
    .active {
      border: 1px solid var(--my-bg-menu-active);
    }
  }
}
</style>
